﻿<Layout SideWidth="120px" style="min-height: 180px; border: 1px solid #ddd; border-radius: 4px;">
    <Header>
        <div class="header">网站 Header</div>
    </Header>
    <Side>
        <div style="border-right: 1px solid #e6e6e6; height: 100%; overflow: auto; padding: 1rem 0; background-color: #f8f9fa;">
            <Menu Items="@GetSideMenuItems()" IsVertical="true" OnClick="@OnClickMenuItem" />
        </div>
    </Side>
    <Main>
        <div class="tab-main-demo">
            <Tab @ref="TabSetMenu">
            </Tab>
        </div>
    </Main>
</Layout>

@code {
    private Tab? TabSetMenu { get; set; }

    private IEnumerable<MenuItem> GetSideMenuItems()
    {
        return new List<MenuItem>
        {
            new MenuItem() { Text = "计数器"  },
            new MenuItem() { Text = "天气预报" }
        };
    }

    private async Task OnClickMenuItem(MenuItem item)
    {
        if (TabSetMenu != null)
        {
            var text = item.Text;
            var tabItem = TabSetMenu.Items.FirstOrDefault(i => i.Text == text);
            if (tabItem == null) await AddTabItem(text ?? "");
            else await TabSetMenu.ActiveTab(tabItem);
        }
    }

    private async Task AddTabItem(string text)
    {
        var item = new TabItem();
        var parameters = new Dictionary<string, object>
        {
            [nameof(TabItem.Text)] = text,
            [nameof(TabItem.IsActive)] = true,
            [nameof(TabItem.ChildContent)] = text == "计数器" ? DynamicComponent.CreateComponent<Counter>() : DynamicComponent.CreateComponent<FetchData>()
        };
        var _ = item.SetParametersAsync(ParameterView.FromDictionary(parameters));
        if (TabSetMenu != null) await TabSetMenu.Add(item);
    }
}
